import React, { memo, useEffect } from "react";
import MoreFilter from "./c-cpns/more-filter";
import { MoreWrapper } from "./style";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { getMoreHouseListAction } from "@/store/modules/more/createActions";
import MoreList from "./c-cpns/more-list";
import Pagination from "@/components/pagination";
import { paginationConfig } from "@/config";

const More = memo(() => {

  const dispatch = useDispatch()
  useEffect(() => {
    window.scrollTo({top: 0, behavior: 'smooth'})
    dispatch(getMoreHouseListAction())
  },[dispatch])

  // 分液器
  const { currentPage, totalCount } = useSelector(state => state.more, shallowEqual)
  const totalPage = Math.ceil(totalCount / paginationConfig.pageSize)

  const pageChangeHandle = (page) => {
    // 滚动到顶部
    window.scrollTo({top: 0, behavior: 'smooth'})
    dispatch(getMoreHouseListAction(page - 1))
  }
  return (
    <MoreWrapper>
      <MoreFilter />
      <MoreList />
      <Pagination config={{totalPage}} pageChangeHandle={pageChangeHandle}/>
    </MoreWrapper>
  )
});

export default More
